<template>
  <div class="home-container">
    <div class="home-wrapper">
      <div class="home-left-context">
        <div
          v-for="(item,index) in sliderleft "
          :key="index"
          :class="current===index?'home-left-item-active':'home-left-item'"
          @click="changecurrent(index)"
        >{{item.anchor_point}}</div>
      </div>

      <div class="home-right-context" ref="right" @mousewheel="onMouse">
        <div v-for="(ele,index) in sliderleft " :key="index" class="home-right-item" ref="block">
          <div>{{ele.anchor_point}}</div>
          <div v-for="(items,index) in ele.commodity_list " :key="index" class="shop-list-item">
            <div class="shop-list-item-img">
              <img :src="items.comm_image" alt />
            </div>
            <div class="shop-list-item-title">
              <div>{{items.comm_title}}</div>
              <div class="shop-list-count">
                <div>￥{{items.comm_price}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  
   
  </div>
</template>

<script>
import "../css/home.css";
import Axios from "axios";

export default {
  data() {
    return {
      sliderleft: [],
       show: false
    };        
  },
  filters: {
    num: function(value) {
      window.console.log(value)
      return value.toFixed(2);
    }
  },
  methods: {
    // 点击左侧右边滚动
    changecurrent(index) {
      this.current = index;
      var rightEle = this.$refs.block[this.current];
      rightEle.scrollIntoView({ behavior: "smooth" });
      this.$refs.right.removeEventListener("scroll", this.handscroll, true);
    },
    handscroll(event) {
      // 右边与左边同步
      var scrolltop = event.target.scrollTop;
      window.console.log(scrolltop)
      var rightitem = this.$refs.block;
      for (let index = 0; index < rightitem.length; index++){
        if (
          scrolltop >= rightitem[index].offsetTop &&
          scrolltop < rightitem[index + 1].offsetTop
        ) {
          if (scrolltop > 3000) {
            this.current = rightitem.length - 1;
          } else {
            this.current = index;
          }
        }
      }
    },
    onMouse() {
      // 
      this.$refs.right.addEventListener("scroll", this.handscroll, true);
    },
    isshow() {
      // 弹出层显示隐藏
      this.show = !this.show;
    },
    addtocart(items) {
      // 获取数据
      window.console.log(items)
      this.$store.dispatch("getcartlist", items);
    },
    addcount(item) {

      // window.console.log(item)
      this.$store.dispatch("addcount", item);
    },
    minuscount(item) {

      // window.console.log(item)
      this.$store.dispatch("minuscount", item);
    },
    deleall() {
      this.$store.dispatch("deleall");
      this.show = false;
    }
  },
  mounted() {
    // 获取json数据
    Axios.get("http://localhost:8080/shoplist.json")
      .then(resp => {
        // window.console.log(resp.data)
        this.sliderleft = resp.data;
      })
      .catch(error => {
        window.console.log(error);
      });
  },
  computed: {
    cartitem: function() {
      return this.$store.state.cartitem;
    },
    totalPrice: function() {
      return this.$store.state.totalPrice;
    }
  }
};
</script>
